import {designComponent, getComponentCls, useClasses, useStyles} from '@peryl/react-compose';
import './skeleton.scss';
import {unit} from "@peryl/utils/unit";

export const Skeleton = designComponent({
  name: 'skeleton',
  props: {
    height: { type: String, default: '6px' }, // 骨架高度
    width: { type: String, default: '100%' }, // 骨架宽度
    square: { type: Boolean }, // 根据宽度自适应为正方形
    round: { type: Boolean }, // 圆形圆角
    radius: { type: String } // 自定义圆角
  },
  slots: ['default'],
  setup({ props, slots }) {
    const classes = useClasses(() => [
      getComponentCls('skeleton'),
      {
        'skeleton-square': !props.height && props.square
      }
    ]);

    const styles = useStyles((style) => {
      const { height, width } = props;
      height != null && (style.height = height);
      width != null && (style.width = width);
      !!props.radius && (style.borderRadius = unit(props.radius));
      !!props.round && (style.borderRadius = '9999px');
    });

    return () => {
      return (
        <div className={classes.value} style={styles.value}>
          {slots.default()}
        </div>
      );
    };
  }
});

export default Skeleton;
